<template>
	<view class="content">
		<view class="logo">
			<view class="fl"></view>
			<view class="fr">
				<text class="f">欢迎进入企法宝</text>
				<text class="ff">输入手机号快捷登录</text>
			</view>
		</view>
		<view class="form">
			<view class="label">
				<text>账号</text>
				<input type="text"  placeholder="请输入手机号" placeholder-class="s" v-model="phone"  name="phone"/>
			</view>
			<view class="label">
				<text>验证码</text>
				<view class="item">
					<input type="text"  placeholder="请输入验证码" placeholder-class="s" v-model="code" name="code"/>
					<view @click="sendCode()">验证码</view>
				</view>
			</view>
			<view class="label">
				<text>密码</text>
				<view class="item">
					<input type="text"  :password="htmls" placeholder="请设置登录密码" placeholder-class="s" v-model="password"  name="password"/>
					<text class="iconfont icon-yanjing" v-if="!flag" @click="passhow()"></text>
					<text class="iconfont icon-yanjing1" v-if="flag" @click="passhow()"></text>
				</view>
			</view>
			<view class="button" @click="register">注册</view>
		</view>
		<text class="footer">确认注册即代表已阅读并同意<text>《软件服务协议》</text></text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				htmls: true,
				phone: '',
				'code':'',
				password: '',
			}
		},
		onLoad() {

		},
		methods: {
			passhow() {
				if (this.flag) {
					this.flag = false
					this.htmls = true
				} else {
					this.flag = true
					this.htmls = false
				}
			},
			sendCode() {
				let self = this;
				let api_url = self.api_url;
				let data = {
					phone: self.phone,
				}
				uni.request({
					url: api_url+'/api/Login/sendCode',
					data: data,
					dataType: 'json',
					method: 'POST',
					success: (res) => {
						console.log('发送完成');
						self.showSuccess('发送完成');
					},
					fail: (res) => {
						console.log(res);
					}
				});
			},
			register() {
				let self = this;
				let api_url = self.api_url;
				let data = {
					phone:self.phone,
					code:self.code,
					password:self.password
				};
				uni.request({
					url:api_url+'/api/Login/register',
					data:data,
					dataType:'json',
					method:'POST',
					success: (res) => {
						let result = res.data;
						let resultCode = result.code;
						if(resultCode != 1){
							console.log(res);
							self.showError(result.msg);
						}else if(resultCode == 1){
							uni.redirectTo({
								url:'/pages/login/login'
							})
						}					
					},
					fail: (res) => {
						self.showError(res);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	view,
	text,
	input,
	textarea {
		box-sizing: border-box;
	}

	.footer {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 19rpx;
		color: #DFDFDF;
		position: fixed;
		left: 0;
		bottom: 100rpx;

		text {
			color: #4986FF;
		}
	}

	.content {
		overflow: hidden;
		width: 100%;
		padding: 146rpx 92rpx 0 92rpx;
		position: relative;

		.logo {
			width: 100%;
			overflow: hidden;
			display: flex;
			align-items: center;

			.fl {
				width: 117rpx;
				height: 117rpx;
				background: #153B33;
				border-radius: 21rpx;
			}

			.fr {
				overflow: hidden;
				margin-left: 16rpx;

				.f {
					display: block;
					font-size: 50rpx;
					line-height: 70rpx;
					font-weight: bold;
					margin-bottom: 12rpx;
					color: #153B33;
				}

				.ff {
					display: block;
					font-size: 25rpx;
					line-height: 35rpx;
					color: #878787;
				}
			}
		}

		.link {
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 42rpx;
			padding: 0 20rpx;

			text {
				font-size: 23rpx;
				color: #2e2e2e;
			}
		}

		.form {
			overflow: hidden;
			margin-top: 80rpx;

			.kj {
				display: block;
				width: 100%;
				text-align: right;
				font-size: 22rpx;
				color: #2E2E2E;
				line-height: 31rpx;
			}

			.button {
				width: 100%;
				height: 83rpx;
				background: #153B33;
				border-radius: 42rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #fff;
				margin-top: 78rpx;
			}

			.label {
				overflow: hidden;
				margin-bottom: 30rpx;
				width: 100%;

				&>text {
					display: block;
					font-size: 25rpx;
					color: #000000;
				}

				.item {
					overflow: hidden;
					height: 80rpx;
					position: relative;
					width: 100%;

					.iconfont {
						color: #C7C7C7;
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						font-size: 35rpx;
					}

					view {
						width: 105rpx;
						height: 46rpx;
						border-radius: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 22rpx;
						background: #153B33;
						color: #fff;
						position: absolute;
						right: 0;
						top: 50%;
						margin-top: -23rpx;
					}
					
				}

				input {
					width: 100%;
					height: 80rpx;
					border: none;
					border-bottom: 1px solid #f4f4f4;
					background: none;
					font-size: 28rpx;
					color: #000000;
				}

				.s {
					font-size: 28rpx;
					color: #C5C5C5;
				}
			}
		}
	}
</style>
